/*********************************************
 *********************************************/

header {
    background: white;

    width: 100%;
    height: 60pt;

    margin: 0;
    padding: 0;

    font-size: 20pt;
    color: #eee;

    display: table-cell;
    vertical-align: middle;
}

#header-text {
    height: 40pt;
    color: rgb(143, 143, 143);
}

#header-motto {
    height: 40pt;
    color: rgb(129, 220, 218);

    border-left: 1px solid rgb(237, 237, 237);
}


/**********************************************
**********************************************/

nav {
    border-top: 1px solid rgb(237, 237, 237);
    border-bottom: 1px solid rgb(237, 237, 237);
}

nav, ul {
    margin: 0;
    padding: 0;
    font-size: 0;

    width: 100%;
    height: 39pt;
    /* background: rgb(50, 55, 60); */
    background: white
}

/* the height must be a absolute value to make this type of elements centered */
nav ul li {
    display: inline-block;

    height: 38pt;
    line-height: 38pt;

    border: 0px solid black;

    margin: 0 4pt;
    text-align: center;
    /* margin-left: auto;
    margin-right: auto; */
    padding: 0 6pt;

    color: rgb(126, 126, 126);
    background: white;

    font-size: 18px;
    font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
    cursor: pointer;

    /* text-shadow: 3pt 3pt 2pt black; */
    user-select: none;
}

nav li:hover {
    display: inline-block;

    background: rgb(246, 246, 246);
    user-select: none;
}

#weight-wrapper {
    width: 160pt;
    height: 24pt;

    /* to remove the space between inline elements */
    font-size: 0;

    text-align: center;
}
#weight-input {
    width: 136pt;
    height: 24pt;

    font-size: 12pt;

    padding: 0 0;
    padding-left: 4pt;
    border: none;
}
#weight-button {
    width: 24pt;
    height: 24pt;
    padding: 0 0;
    border: none;
    
    vertical-align: bottom;

    background-image: url("./add-weight.svg");
    background-repeat: no-repeat;
    background-size: 24pt 24pt;
    background-position: center;

    cursor: pointer;
}
/* 
#search-container {
    position: absolute;
    top: calc(200pt);
    right: calc(160pt + 1pt);

    width: calc(178pt + 48pt);
    height: 38pt;
} */

/* #search-dropdown-wrapper {
    text-align: center;
}

#search-dropdown {
    position: absolute;
    top: calc(200pt + 1pt);
    right: calc(32pt + 160pt + 2pt + 2pt + 1pt + 140pt + 1pt);

    width: 58pt;
    height: 36pt;
    line-height: 36pt;
    font-size: 16pt;
    color: rgb(11, 34, 57);

    border-top-left-radius: 4pt;
    border-bottom-left-radius: 4pt;

    display: inline-block;
    cursor: pointer;
    user-select: none;

    background-color: rgb(227, 233, 237);
}

#search-dropdown::after {
    background-image: url('./arrow-down.svg');
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;

    content:"";
} */

#search-input {
    position: absolute;
    top: calc(200pt + 1pt);
    right: calc(32pt + 160pt + 2pt + 2pt + 1pt + 1pt);

    height: 36pt;   /* the same as li elements*/
    width: 140pt;
    padding: 4pt;
    border: none;
    font-size: 16pt;
    
    vertical-align: middle;
    background: rgb(246, 246, 246);

    /* background: #32373c;
    background-image: url("search-icon.png");
    background-size: 100%;
    background-repeat:no-repeat; */
}

#search-input::placeholder {
    color: rgb(203, 203, 203);
}

#search-input:focus {
    outline: none;
}

#search-button {
    position: absolute;
    top: calc(200pt + 1pt);
    right: calc(160pt + 1pt + 1pt);   /* the same as #float-personal-block */

    height: 36pt;   /* the same as li elements*/
    width: 36pt;
    border: none;
    vertical-align: middle;

    background: rgb(246, 246, 246);
    background-position: center;
    background-image: url("search.svg");
    background-size: 14pt;
    background-repeat: no-repeat;

    cursor: pointer;
} 

#search-button:focus {
    outline: none;
}


/*********************************************
 *********************************************/

#beneath-nav {
    height: 8%;

    margin: 0px;
}

/*********************************************
 *********************************************/

body {
    margin: 0px;
    padding: 0px;

    overflow: /*hidden*/auto;
}

#one-blog {
    border-width: 1px;
    border-color: black;
    border-style: solid;
    width: 75%;

    left: 0px;
}

/*********************************************
 *********************************************/

#float-personal-block {
    position: fixed;
    top: 0pt;
    right: 0%;
    padding: 0px;
    margin: 0px;

    /* border-width: 1px;
    border-color: black;
    border-style: solid; */

    width: 160pt;
    height: 100%;
}

#float-personal-block-portrait {
    position: fixed;

    right: calc(80pt - 60pt / 2);
    top: 0pt;

    height: 60pt;
    width: 60pt;
    border-radius: 30pt;
    border-width: 1px;
    border-color: rgb(235, 235, 235);
    border-style: solid;

    margin: 0;
    
    background-image: url(./head-portrait.jpg);
    background-position: center;
    background-size: 60pt;
    background-repeat: no-repeat;
}

#float-personal-block-portrait-border1 {
    position: fixed;

    right: calc(80pt - 60pt / 2);
    top: 0pt;

    height: 60pt;
    width: 60pt;
    border-radius: 30pt;
    border-width: 1px;
    border-color: rgb(240, 240, 240);
    border-style: solid;

    margin: 0;
    z-index: -1;
}

#float-personal-block-portrait-border2 {
    position: fixed;

    right: calc(80pt - 60pt / 2);
    top: 0pt;

    height: 60pt;
    width: 60pt;
    border-radius: 30pt;
    border-width: 1px;
    border-color: rgb(245, 245, 245);
    border-style: solid;

    margin: 0;
    z-index: -1;
}
#float-personal-block-portrait-border3 {
    position: fixed;

    right: calc(80pt - 60pt / 2);
    top: 0pt;

    height: 60pt;
    width: 60pt;
    border-radius: 30pt;
    border-width: 1px;
    border-color: rgb(250, 250, 250);
    border-style: solid;

    margin: 0;
    z-index: -1;
}
#float-personal-block-portrait-border4 {
    position: fixed;

    right: calc(80pt - 60pt / 2);
    top: 0pt;

    height: 60pt;
    width: 60pt;
    border-radius: 30pt;
    border-width: 1px;
    border-color: rgb(255, 255, 255);
    border-style: solid;

    margin: 0;
    z-index: -1;
}

@keyframes portrait-animation1 {
    0% { border-color: rgb(103, 175, 254); }
    25% { border-color: rgb(240, 240, 240); }
    100% { border-color: rgb(240, 240, 240); }
}
@keyframes portrait-animation2 {
    
    0% { border-color: rgb(158, 190, 254); }
    25% { border-color: rgb(245, 245, 245); }
    100% { border-color: rgb(245, 245, 245); }
}
@keyframes portrait-animation3 {
    
    0% { border-color: rgb(200, 220, 254); }
    25% { border-color: rgb(250, 250, 250); }
    100% { border-color: rgb(250, 250, 250); }
}
@keyframes portrait-animation4 {
    
    0% { border-color: rgb(253, 241, 254); }
    25% { border-color: rgb(255, 255, 255); }
    100% { border-color: rgb(255, 255, 255); }
}

#float-personal-block-portrait-beneth {
    width: 60pt;
    height: 60pt;

    background: transparent;
}

section {
    height: 40pt;
    line-height: 40pt;

    text-align: center;

    font-size: 20pt;
    /* background: linear-gradient(to right, white, rgb(236, 236, 236) 10%, rgb(236, 236, 236) 90%, white); */

    background: linear-gradient(to right, white, rgb(189, 219, 255), rgb(189, 219, 255), white);
}

#float-personal-block {
    /* background-color: brown; */
    background-color: white;
}

#float-personal-block > p {
    margin: 0;
}

#float-personal-block > p > a {
    height: 20pt;
    margin: 0pt;
    line-height: 20pt;

    display: block;
    text-align: center;
    font-size: 12pt;
    color: rgb(28, 142, 254);
    font-weight: bold;
    background-color: white;
    text-decoration: none;
}

text {
    dominant-baseline: text-after-edge;
}

/********************************************/

footer {
    border-color: black;
    border-width: 1px;
    border-style: solid;

    width: 75%;
}

/*********************************************/
iframe {
    /* arbitrary init value */
    width: 600;
    height: 1000;

    border: none;

    /* first hidden, make it visible only after the iframes are loaded */
    /* visibility: visible; */
}